<template>
  <div>
    <van-overlay :show="isWeChat">
      <img src="../../assets/img/login/popup/mengb-ios-0.png" alt="">
    </van-overlay>
    <van-overlay :show="isBrowser && !standalone && !is_pc">
      <img v-if="appType === '277'" class="browser" src="../../assets/img/login/popup/dlg.png" alt="">
      <img v-else class="browser" src="../../assets/img/login/popup/dlg_cat.png" alt="">
      <img class="icon_close" src="../../assets/img/login/popup/dlg-close.png" alt="" @click="isBrowser = false">
    </van-overlay>
  </div>
</template>

<script>
import { appType } from '../../assets/js/app'
export default {
  data() {
    return {
      isWeChat: false,
      isBrowser: false,
      standalone: false,
      appType: null,
      is_pc: false,
    }
  },
  created () {
    this.is_pc = this.getClientType() === 'pc' ? true: false
    this.appType = appType()
    this.standalone = window.navigator.standalone
    var ua = window.navigator.userAgent.toLowerCase()  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        this.isWeChat = true 
    } else {  
        this.isWeChat = false
    }
    if(!this.isWeChat) {
      this.isBrowser = true
    }else {
      this.isBrowser = false
    }
  },
  methods: {
    getClientType() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
          //alert(navigator.userAgent);
          return 'ios';
      } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
          //alert(navigator.userAgent);
          return 'android';
      } else { //pc
          return 'pc';
      };
    }
  },
}
</script>

<style scoped>
.browser {
  display: block;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.icon_close {
  position: absolute;
  top: 70px;
  right: 25px;
  display: block;
  width: 60px;
  height: 60px;
}
</style>